<template>
  <n-divider :vertical="vertical" :title-placement="titlePlacement">
    {{ title }}
  </n-divider>
</template>

<script setup lang="ts">
import { computed, toRefs } from 'vue'

interface Props {
  vertical?: boolean
  marginTop?: string
  marginBottom?: string
  marginLeft?: string
  marginRight?: string
  color?: string
  title?: string
  titlePlacement?: 'left' | 'right'
}
const props = withDefaults(defineProps<Props>(), {
  vertical: false,
  marginTop: '3px',
  marginBottom: '3px',
  marginLeft: '10px',
  marginRight: '10px',
  color: 'rgb(239, 239, 245)',
})

const { marginLeft, marginRight, marginTop, marginBottom, color } = toRefs(props)
</script>

<style scoped>
.n-divider {
  --n-color: v-bind(color) !important;
}
.n-divider:not(.n-divider--vertical) {
  margin-top: v-bind(marginTop);
  margin-bottom: v-bind(marginBottom);
}
.n-divider.n-divider--vertical {
  margin-left: v-bind(marginLeft);
  margin-right: v-bind(marginRight);
}
</style>
